<template>
  <div v-loading="loading" class="list-table">
    <div style="margin-bottom: 30px">
      <el-row>
        <el-col :span="6">
          <div class="tag-group">
            <el-tag type="success" effect="dark">{{ $t('是') }}: {{ yes }}</el-tag>
            <el-tag type="danger" effect="dark">{{ $t('否') }}: {{ no }}</el-tag>
            <el-tag type="info" effect="dark">{{ $t('不适用') }}: {{ notApply }}</el-tag>
            <el-tag type="warning" effect="dark">{{ $t('未选择') }}: {{ notSelect }}</el-tag>
          </div>
        </el-col>
        <el-col :span="12">
          <h2 style="text-align: center">{{ $t('尽职调查的内容和基本要求') }}</h2>
        </el-col>
        <el-col :span="6">
          <div style="float: right">
            <span class="tag-group__title">{{ $t('尽调工具') }}：</span>
            <el-select v-model="ddToolValue" :placeholder="$t('尽调工具(支持搜索)')" clearable filterable @change="ddToolChange">
              <el-option
                v-for="(dict, index) in ddToolOptions"
                :key="index"
                :value="dict.dictValue"
                :label="$t(dict.dictLabel)"
              />
            </el-select>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-form>
      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            v-hasPermi="['deal:allround:edit']"
            type="primary"
            icon="el-icon-edit"
            size="mini"
            :disabled="isEdit"
            @click="editHandle()"
          >{{ $t("编辑") }}</el-button>
        </el-col>
      </el-row>
      <el-table
        v-for="(item, index) in tableTitles"
        :key="index"
        :data="item.contentList"
        :span-method="(arg)=>objectSpanMethod(arg,item.contentList)"
        border
        tooltip-effect="darkTable"
        class="noneHoverBg"
      >
        <el-table-column :label="$t(item.type)" width="150px" align="center" class-name="multi-ellipsis-3" prop="dealDdList.categoriesChildTypeFormat">
          <template slot-scope="scope">
            <span>{{ $t(scope.row.dealDdList.categoriesChildTypeFormat) }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="$t(item.content)" class-name="multi-ellipsis-3" prop="content">
          <template slot-scope="scope">
            {{ $t(scope.row.content) }}
          </template>
        </el-table-column>
        <el-table-column :label="$t(item.complete)" width="250px" align="center" prop="complete">
          <template slot-scope="scope">
            <el-radio-group v-model="scope.row.complete" size="mini">
              <el-radio-button
                v-for="dict in completeOptions"
                :key="dict.dictValue"
                :label="$t(dict.dictValue)"
              >
                {{ dict.dictLabel }}
              </el-radio-button>
            </el-radio-group>
          </template>
        </el-table-column>
        <el-table-column :label="$t(item.finishDate)" width="250px" align="center" prop="finishDate">
          <template slot-scope="scope">
            <DatePicker v-model="scope.row.finishDate" :placeholder="$t(item.finishDate)" />
          </template>
        </el-table-column>
        <el-table-column :label="$t(item.remark)" width="280px" align="center" prop="remark">
          <template slot-scope="scope">
            <el-input v-model="scope.row.remark" type="textarea" maxlength="2000" :placeholder="$t(item.remark)" :autosize="{ maxRows: 2 }" />
          </template>
        </el-table-column>
      </el-table>
      <FileTable :list.sync="fileList" has-permi="deal:allround" data-type="deal_all_round" :business-id="autoBusinessId($route.query.id, form)" :btn-show="!otherBtnHide" />
    </el-form>
    <div v-if="!btnHide" slot="footer" class="dialog-footer" style="text-align: center;margin-top: 20px">
      <SaveBtn has-permi="deal:allround" :cancel-show="false" />
    </div>
    <el-dialog :title="$t(title)" :visible.sync="formOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogView" append-to-body @close="init()">
      <dealAllRoundIndex ref="dealAllRoundIndex" />
    </el-dialog>
  </div>
</template>

<script>
  import { getTableTitle, saveAllRound, checkExistDd, getAllRoundList } from '@/api/deal/dd/dealDd'
  import { getDicts } from '@/api/system/dict/data'
  import dealAllRoundIndex from '@/views/deal/allround/dealAllRoundIndex'

  export default {
    components: {
      dealAllRoundIndex
    },
      data() {
        return {
          // 按钮禁用
          isEdit: false,
          // 是否隐藏保存按钮
          btnHide: false,
          // 尽调数据
          tableTitles: [],
          // 完成情况字典
          completeOptions: [],
          // 加载
          loading: false,
          // 完成情况统计: 是
          yes: 0,
          // 完成情况统计: 否
          no: 0,
          // 完成情况统计: 不适用
          notApply: 0,
          // 完成情况统计: 未选择
          notSelect: 0,
          // 尽调工具字典
          ddToolOptions: [],
          // 是否隐藏其它按钮
          otherBtnHide: false,
          // 尽调工具值
          ddToolValue: undefined,
          // 上传附件
          fileList: undefined,
          // 刷新页面
          initData: [],
          title: '全面尽调',
          // 修改页面
          formOpen: false,
          refresh: true
        }
      },
    watch: {
        // 监听全面尽调数据 对完成情况进行统计
      'tableTitles': {
        handler() {
          this.yes = 0
          this.no = 0
          this.notApply = 0
          this.notSelect = 0
          if (this.tableTitles !== undefined) {
            this.tableTitles.forEach(item => {
              if (item.contentList !== undefined) {
                item.contentList.forEach(ele => {
                  if (ele.complete === 'Y') {
                    this.yes++
                  } else if (ele.complete === 'N') {
                    this.no++
                  } else if (ele.complete === 'BSY') {
                    this.notApply++
                  } else {
                    this.notSelect++
                  }
                })
              }
            })
          }
        },
        deep: true,
        immediate: true
      }
    },
    mounted() {
      this.$bus.$emit('async_done')
    },
    created() {
      getDicts('all_round_complete').then(response => {
        this.completeOptions = response.data
      })
      getDicts('dd_tool').then(response => {
        this.ddToolOptions = response.data
      })
    },
    methods: {
        init(data) {
          if (data !== undefined) {
          this.initData = data
          }
          if (this.$route.query.id) {
            this.initData.id = this.$route.query.id
            if (this.initData.formId) {
              // 流程页面隐藏编辑按钮
              this.btnHide = true
            }
          }
          console.log(data, 'datadata')
          this.loading = true
          this.tableTitles = []
          this.fileList = []
          checkExistDd(this.initData.id).then(response => {
            if (!response.data) {
              getTableTitle(this.$route.query.id).then(response => {
                this.tableTitles = response.data.data
                this.fileList = response.data.fileList
                // 获取流程选填附件
                if (data.fileList != null) {
                  this.fileList = data.fileList
                }
                this.loading = false
              })
            } else {
              getAllRoundList(this.$route.query.id).then(response => {
                this.tableTitles = response.data
                this.fileList = this.tableTitles[0].fileList
                this.loading = false
              })
            }
            // this.loading = false
          })
        },
      objectSpanMethod({ rowIndex, columnIndex }, item) {
        if (columnIndex === 0) {
          const spanArr = this.rowspan(item)
          for (let i = 0; i < spanArr.length; i++) {
            const _row = spanArr[rowIndex]
            return {
              rowspan: _row,
              colspan: 1
            }
          }
        }
      },
      rowspan(data) {
        // 二维数组，用于存放单元格合并规则
        const spanArr = []
        // 用于存储相同项的开始index
        let position = 0
        data.forEach((item, index) => {
          if (index === 0) {
            spanArr.push(1)
            position = 0
          } else {
            if (data[index].dealDdList.categoriesChildType === data[index - 1].dealDdList.categoriesChildType) {
              spanArr[position] += 1 // 有相同项
              spanArr.push(0) // 名称相同后往数组里面加一项0
            } else {
              spanArr.push(1) // 同列的前后两行单元格不相同
              position = index
            }
          }
        })
        return spanArr
      },
      /** 提交按钮 */
      submitForm: function(type) {
        console.log('type', 'typetypetype')
        return new Promise((resolve, reject) => {
          this.loading = true
          // 保存方式，如果值为actSave则是从流程表单中进行的保存，默认将delFlag 设置为2,审批通过后在更新为0
          this.tableTitles.forEach(item => {
            if (item.fileList) {
              item.fileList = []
            }
          })
          const params = {
            data: this.tableTitles,
            fileList: this.fileList,
            dealId: this.$route.query.id,
            // 保存方式
            saveType: type
          }
          saveAllRound(params).then(response => {
            if (response.code === 200) {
              this.msgSuccess(this.$t('保存成功'))
              this.init(this.initData)
              resolve(response.data.id)
            } else {
              this.msgError(response.msg)
              reject(response)
            }
            this.loading = false
          }).catch(() => {
            this.loading = false
          })
        })
      },
      ddToolChange(val) {
        if (val !== null && val !== '') {
          window.open(val, '_blank')
        }
      },
      // 修改全面尽调
      editHandle() {
        this.isEdit = true
        // 修改前先保存
        const params = {
          data: this.tableTitles,
          fileList: this.fileList,
          dealId: this.$route.query.id
        }
        saveAllRound(params).then(response => {
          if (response.code === 200) {
            this.formOpen = true
            this.$nextTick(() => {
              this.$refs.dealAllRoundIndex.initIndex(this.$route.query.id)
              this.isEdit = false
            })
          }
        })
       }
    }
  }
</script>

<style scoped>
  .content {
    white-space: normal;
  }
</style>
